import { Popover, Tooltip, message } from 'antd';
import { useState } from 'react';
import { replaceImageUrl } from '@/utils';
// css
import styles from '@/styles/CommonDetail.module.scss';
// api
import { hotelRoomDetail } from '@/api/hotel';
// 组件
import HotelRoomDetail from './Order.hotel.roomDetail';
import Cart from './Cart';

// 除酒店
const ItemNormal = ({ algorithms, data, children }) => {
    const price = algorithms == 2 ? data.salePrice : data.showPrice;
    return (
        <div className={styles['item']}>
            <div className={[styles['cell'], styles['cell-title']].join(' ')}>
                <h3>{data.goodsExtendName}</h3>
            </div>
            <div className={[styles['cell'], styles['cell-con']].join(' ')}>
                {data.specification}
            </div>
            <div className={[styles['cell'], styles['cell-label']].join(' ')}>
                <div className={styles['labels']}>
                    <Tooltip placement="topLeft" title={data.predefinedInstructions}>
                        <span><em className="iconfont icon-tishishuoming"></em></span>
                    </Tooltip>
                    <span>{data.validityVerificationDesc}</span>
                    <span>{data.refundRuleDesc}</span>
                </div>
            </div>
            <div className={[styles['cell'], styles['cell-price']].join(' ')}>
                <p className={styles['price']}>
                    ￥<b>{price}</b><span>起</span>
                </p>
            </div>
            <div className={[styles['cell'], styles['cell-btn']].join(' ')}>
               { children }
            </div>
        </div>
    )
}
// 酒店
const ItemHotel = ({id, algorithms, data, children}) => {
    const price = algorithms == 2 ? data.salePrice : data.showPrice;
    const { goodsExtendName } = data;
    const [detail, setDetail] = useState({});
    // 获取酒店详情
    function getHotelDetail(extendName, extendId) {
        hotelRoomDetail(id, extendId).then(res => {
            const { code, data } = res;
            if (code === 0 && data) {
                const {
                    showPicture, addBed, addBedNumber,
                    haveWindow, smoking, breakfastType,
                    breakfastExtendPrice, breakfastTypeName, breakfastNumber,
                    bedInfos, bedTypeName,
                    refundExplanation, predefinedInstructions } = data;
                data.goodsExtendName = extendName;
                data.imgs = showPicture ? showPicture.split(',') : [];
                data.bed = addBed == 1 ? '否' : (addBedNumber ? `可加${addBedNumber}张` : '否');
                data.window = haveWindow == 1 ? "否" : "是";
                data.smoke = smoking == 1 ? "禁烟" : "不禁烟";
                data.food = breakfastType == 1 ? (breakfastExtendPrice ? breakfastExtendPrice + "/人" : "无") : breakfastTypeName;
                if (breakfastType == 4) {
                    data.food = !breakfastNumber ? "不限人数" : breakfastNumber + "人餐";
                }
                data.beds = (bedInfos || [{ bedNumber: 1, bedTypeName, bedWidth: "1.2" }]).map(item => {
                    return `${item.bedTypeName}、${item.bedWidth}米、${item.bedNumber}张`
                });
                data.refundExplanation = refundExplanation + predefinedInstructions
                setDetail(data);
            } else {
                message.error('获取数据失败，请重试')
            }
        })
    }

    return (
        <div className={styles['room-item']} key={data.id}>
            <div className={styles['room-type']} title={goodsExtendName}>
                <div><img src={replaceImageUrl(data.thumbnail)} alt="" /></div>
                <p>{goodsExtendName}</p>
                <Popover placement="rightTop" trigger="click" content={detail ? <HotelRoomDetail detail={detail} /> : ''}>
                    <span onClick={() => { getHotelDetail(goodsExtendName, data.id) }}>查看详情</span>
                </Popover>
            </div>
            <div className={styles['room-bed']}>{data.bedTypeName}</div>
            <div className={styles['room-food']}>{data.breakfastTypeName}</div>
            <div className={styles['room-facility']}>
                <span>{data.validityVerificationDesc}</span>
                <span>{data.refundRuleDesc}</span>
            </div>
            <div className={styles['room-price']}>
                ￥<b>{price}</b><span>起</span>
            </div>
            <div className={styles['room-stock']}>
                剩余<span>{data.stock || 0}</span>间
            </div>
            <div className={styles['room-btn']}>
                { children }
            </div>
        </div>
    )
}

// Export Component
const Item = ({ target, id, algorithms, data, isLimit, minNum, maxNum, onAddOrder, onChangeNum, onAddCart }) => {
    const CartElem = (
        <Cart 
            data={data} 
            isLimit={isLimit} 
            minNum={minNum} 
            maxNum={maxNum} 
            onAddOrder={onAddOrder} 
            onChangeNum={onChangeNum} 
            onAddCart={onAddCart} 
        />
    )
    if(target !== '/hotel'){
        return <ItemNormal algorithms={algorithms} data={data}>{ CartElem }</ItemNormal>
    }
    return <ItemHotel id={id} algorithms={algorithms} data={data}>{ CartElem }</ItemHotel>
}

export default Item